<template>
	<view class="w100">
		<view class="cu-bar bg-white">
			<view class="action">
				{{label}}
				<text class="c12 fs8 padl3">{{placeholder}}</text>
			</view>
			<view class="action">
				<view class="cu-btn line-green round" @click="selectFile()">选择文件</view>
			</view>
		</view>
		<view class="cu-form-group padb5">
			<view class="bdso bdc12 fs30 c12 bc13" @tap="selectFile()" v-if="fileList.length===0">
				<view class=" wh30-30 flcc"><text class='cuIcon-file'></text></view>
			</view>
			<view class="w100">
				<view class="pad2 bdda mar2" v-for="tile, index in fileList" :key="tile.name">
					<!-- <image mode="aspectFill" class="fileCommonSize bc13" :src="file(tile)"></image> -->
					<view class="flrc ofe">
						<view class="fa fa-folder-open fa-2x "></view>
						
						<!-- <view class="pos-a w100 r0 l0 b0 flrc op8"> -->
						<view class="flex1 tar">
							<!-- <view class="cu-btn cuIcon marr3" @click="move(index,-1)">
								<view class="fa fa-angle-up"></view>
								<ripple></ripple>
							</view>
							<view class="cu-btn cuIcon marr3" @click="move(index,1)">
								<view class="fa fa-angle-down"></view>
								<ripple></ripple>
							</view> -->
							<view class="cu-btn cuIcon" @click="del(index)">
								<view class="fa fa-trash"></view>
								<ripple></ripple>
							</view>
						</view>
					</view>
					<view class="w100">
						<view class="flex1 ofe">{{tile.name}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import fileUpload from "../../assets/js/fileUpload.js"
	let fileUp = new fileUpload()

	export default {
		name: "sfiles",
		props: {
			value:{
				type: Array,
				default: []
			},
			label: {
				type: String,
				default: ''
			},
			placeholder: {
				type: String,
				default: "",
			}
		},
		data() {
			return {
				fileList: []
			}
		},
		methods: {
			selectFile() {
				var _this = this;
				fileUp.setData(this.value)
				fileUp.select(9).setCbFunc(function(files) {
					_this.fileList = files
					_this.$emit("input", files)
				})
			},
			del(index) {
				var _this = this;
				var files = fileUp.removeFile(index)
				this.fileList = files
				_this.$emit("input", files)
			},
			move(index, num) {
				var _this = this;
				var files = fileUp.fileMove(index, num)
				this.fileList = files
				_this.$emit("input", files)
			},
		},
		created() {
				this.log(this.value)
				this.fileList = this.value
			fileUp.setData(this.value)
		},
		watch:{
			value(curVal,oldVal){
				this.log(curVal)
				fileUp.setData(curVal)
				var _this = this;
				_this.fileList = curVal
				_this.$emit('input',curVal)
			},
		}
	}
</script>

<style>
	.fileCommonSize {
		width: 40vw;
		height: 40vw;
	}

	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
	}
</style>
